<template>
  <el-dialog
    :title="$t('message.orderDetail')"
    :close-on-click-modal="false"
    :visible.sync="visible"
    append-to-body>

    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <table style="width: 100%;">
        <tr>
          <th colspan="2"><div><div class="info-label">{{$t('message.orderDetail')}}</div></div></th>
        </tr>
    </table>
      <div>
      <table style="width: 100%;">
        <tr>
          <td style="width: 30%;"><div><div class="info-label">{{$t('message.receiver')}}：{{ dataForm.order.userName }}</div></div></td>
          <td style="width: 30%;"><div><div class="info-label">{{$t('message.receiverPhone')}}：{{ dataForm.order.phone }}</div></div></td>
        </tr>
        <!-- <tr>
          <td style="width: 30%;"><div><div class="info-label">{{$t('message.email')}}：{{ dataForm.order.email }}</div> </div></td>
          <td style="width: 30%;"><div><div class="info-label">{{$t('message.phoneNo')}}：{{ dataForm.order.mobile }}</div></div></td>
        </tr> -->
        <tr>
          <td style="width: 30%;">
            <div>
              <div class="info-label">{{$t('message.status')}}：
                <el-tag v-if="dataForm.order.status === 0" size="small">{{$t('message.noSubmit')}}</el-tag>
                <el-tag v-else-if="dataForm.order.status === 1" size="small" type="success">{{$t('message.noConfirm')}}</el-tag>
                <el-tag v-else-if="dataForm.order.status === 2" size="small" type="success">{{$t('message.confirmed')}}</el-tag>
                <el-tag v-else-if="dataForm.order.status === 3" size="small" type="success">{{$t('message.shipped')}}</el-tag>
              </div> 
            </div>
          </td>
          <td style="width: 30%;"><div><div class="info-label">{{$t('message.totalPrice')}}：{{ dataForm.totalPrice }}</div></div></td>
        </tr>
        <tr>
          <td style="width: 30%;"><div><div class="info-label">{{$t('message.orderNo')}}：{{ dataForm.order.orderNo }}</div> </div></td>
          <td style="width: 30%;"><div><div class="info-label">{{$t('message.createTime')}}：{{ dataForm.order.createTime }}</div></div></td>
        </tr>
        <tr>
          <td style="width: 30%;"><div><div class="info-label">{{$t('message.clientAddress')}}：{{ dataForm.order.address }}</div> </div></td>
        </tr>
      </table>
    </div>

    <table style="width: 100%;">
        <tr>
          <th colspan="2"><div><div class="info-label">{{$t('message.goodsDetail')}}</div></div></th>
        </tr>
    </table>

    <el-table
      :data="dataForm.detailList"
      border
      style="width: 100%;">
      <el-table-column
        prop="goodsName"
        header-align="center"
        align="center"
        :label="$t('message.productName')">
      </el-table-column>
      <el-table-column
        prop="amount"
        header-align="center"
        align="center"
        :label="$t('message.amount')">
      </el-table-column>
      <el-table-column
        prop="unitPrice"
        header-align="center"
        align="center"
        :label="$t('message.unitPrice')">
      </el-table-column>
      <el-table-column
        prop="price"
        header-align="center"
        align="center"
        :label="$t('message.totalPrice')">
      </el-table-column>
    </el-table>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">{{$t('message.cancle')}}</el-button>
  </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        dataListLoading: false,
        visible: false,
        dataForm: {
          totalPrice: '',
          order: '',
          detailList: []
        }
      }
    },
    methods: {
      init (id) {
        this.visible = true
        if (this.$refs['dataForm'] !== undefined) {
          this.$refs['dataForm'].resetFields()
        }
        this.$http({
          url: this.$http.adornUrl(`/sys/purchaseOrder/queryDetail`),
          method: 'post',
          data: this.$http.adornData({
            'id': id
          })
        }).then(({data}) => {
          this.dataForm.totalPrice = data.totalPrice
          this.dataForm.order = data.order
          this.dataForm.detailList = data.detailList
          this.dataListLoading = false
        })
      }
    }
  }
</script>
